import React from 'react'
import { View, Image, Dimensions } from 'react-native'
import { CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right } from 'native-base'
import moment from 'moment'
import { THEME_BACKGROUND } from '../../static/color'

const { width } = Dimensions.get('window')
const Love = (props) => {
  const { dataSource } = props
  const {
    area,
    attraction,
    createdAt,
    love
  } = dataSource
  return (
    <View
      style={{
      width: '95%',
      margin: 5,
      borderRadius: 5,
      borderStyle: 'solid',
      elevation: 10
    }}
    >
      <CardItem cardBody>
        <Image source={{ uri: 'http://seopic.699pic.com/photo/50063/5074.jpg_wh1200.jpg' }} style={{ height: 150, width: null, flex: 1 }} />
      </CardItem>
      <CardItem footer>
        <Left>
          <Button transparent textStyle={{ color: '#87838B' }}>
            <Icon name="ios-map" style={{ fontSize: 15, color: THEME_BACKGROUND }} />
            <Text style={{ fontSize: 10 }}>{area[0]}-{attraction}</Text>
          </Button>
        </Left>
        <Body>
          <Icon
            name="thumbs-up"
            type="FontAwesome"
            style={{ fontSize: 15, color: THEME_BACKGROUND }}
          />
          <Text style={{ fontSize: 10 }}>{love.length} Likes</Text>
        </Body>
        <Right>
          <Button transparent>
            <Icon name="ios-clock" style={{ fontSize: 15, color: THEME_BACKGROUND }} />
            <Text style={{ fontSize: 10 }}>{moment(createdAt).format('YYYY/MM/DD')}</Text>
          </Button>
        </Right>
      </CardItem>
    </View>
  )
}

export default Love
